<template>
    <Teleport to="#loading">
        <div class="loading_box" v-if="status"
            :style="{ 'background-color': backgroundColor ? backgroundColor : 'rgba(255, 255, 255, 0.5)' }">
            <div class="spinner-border text-primary loading_icon" role="status">
                <span class="visually-hidden">{{ text ? text : 'Loading...' }} </span>
            </div>
        </div>
    </Teleport>
</template>

<script lang='ts'>
import { defineComponent, onUnmounted } from 'vue'
export default defineComponent({
    name: 'Loading',
    props: {
        status: {
            type: Boolean,
            required: true
        },
        text: {
            type: String,
        },
        backgroundColor: {
            type: String
        }
    },
    setup() {
        const loading = document.createElement('div')
        loading.id = 'loading'
        document.body.appendChild(loading)
        onUnmounted(() => {
            document.body.removeChild(loading)
        })
    }
})
</script>
<style scoped lang="less">
.loading_box {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>